import QtQuick 2.0

Item {
    id: root;

    Flickable {
        anchors.fill: parent;
        anchors.margins: 20;

        width: parent.width;
        height: parent.height;

        clip: true;
        contentHeight: grid.height;

        Flow {
            id: grid;
            anchors.left: parent.left;
            anchors.right: parent.right;

            spacing: 20;

            TextRectangle {
                text.text: qsTr("API");

                Canvas {
                    anchors.left: parent.left;
                    anchors.top: parent.top;
                    anchors.right: parent.right;
                    anchors.bottom: parent.text.top;
                    //画图
                    onPaint: {
                        //获得画笔
                        var ctx = getContext("2d");

                        //画笔宽度
                        ctx.lineWidth = 4;
                        //画笔类型
                        ctx.strokeStyle = "blue";
                        //填充
                        ctx.fillStyle = "steelblue";
                        //开始新的画图路径
                        ctx.beginPath();
                        //左上角点
                        ctx.moveTo(50, 50);
                        //上边
                        ctx.lineTo(150, 50);
                        //右边
                        ctx.lineTo(150, 150);
                        //下边
                        ctx.lineTo(50, 150);
                        //关闭路径
                        ctx.closePath();
                        //填充
                        ctx.fill();
                        //使用线条宽度和笔画风格的笔画
                        ctx.stroke();
                    }
                }
            }

            TextRectangle {
                text.text: qsTr("Rect");

                Canvas {
                    anchors.left: parent.left;
                    anchors.top: parent.top;
                    anchors.right: parent.right;
                    anchors.bottom: parent.text.top;

                    onPaint: {
                        var ctx = getContext("2d");
                        ctx.fillStyle = "green";
                        ctx.strokeStyle = "blue";
                        ctx.lineWidth = 4;

                        ctx.fillRect(20, 20, 80, 80);
                        ctx.clearRect(30, 30, 60, 60);
                        ctx.strokeRect(20, 20, 40, 40);
                    }
                }
            }

            TextRectangle {
                text.text: qsTr("Gradient");

                Canvas {
                    anchors.left: parent.left;
                    anchors.top: parent.top;
                    anchors.right: parent.right;
                    anchors.bottom: parent.text.top;

                    onPaint: {
                        var ctx = getContext("2d");
                        var gradient = ctx.createLinearGradient(100, 0, 100, 200);
                        gradient.addColorStop(0, "blue");
                        gradient.addColorStop(1, "lightsteelblue");
                        ctx.fillStyle = gradient;
                        ctx.fillRect(50, 50, 100, 100);
                    }
                }
            }

            TextRectangle {
                text.text: qsTr("Shadows");

                Canvas {
                    anchors.left: parent.left;
                    anchors.top: parent.top;
                    anchors.right: parent.right;
                    anchors.bottom: parent.text.top;

                    onPaint: {
                        var ctx = getContext("2d");
                        ctx.strokeStyle = "#333";
                        ctx.fillRect(0, 0, width, height);
                        ctx.shadowColor = "blue";
                        ctx.shadowOffsetX = 2;
                        ctx.shadowOffsetY = 2;
                        ctx.font = 'bold 40px 微软雅黑';
                        ctx.fillStyle = "#33a9ff";
                        ctx.fillText("Earth", 30, 100);
                    }
                }
            }

            TextRectangle {
                width: 200;
                height: 200;

                text.text: qsTr("Image");

                Canvas {
                    anchors.left: parent.left;
                    anchors.top: parent.top;
                    anchors.right: parent.right;
                    anchors.bottom: parent.text.top;

                    onPaint: {
                        var ctx = getContext("2d");
                        ctx.drawImage("image/png/soccer_ball.png", 10, 10);

                        ctx.save();
                        ctx.strokeStyle = "red";
                        ctx.beginPath();
                        ctx.moveTo(10, 10);
                        ctx.lineTo(55, 10);
                        ctx.lineTo(35, 55);
                        ctx.closePath();

                        ctx.translate(100, 0);
                        ctx.clip();
                        ctx.drawImage("image/png/soccer_ball.png", 10, 10);
                        ctx.stroke();
                        ctx.restore();
                    }

                    Component.onCompleted: {
                        loadImage("image/png/soccer_ball.png");
                    }
                }
            }

            TextRectangle {
                text.text: qsTr("Translate");

                Canvas {
                    anchors.left: parent.left;
                    anchors.top: parent.top;
                    anchors.right: parent.right;
                    anchors.bottom: parent.text.top;

                    onPaint: {
                        var ctx = getContext("2d");

                        ctx.strokeStyle = "blue";
                        ctx. lineWidth = 4;
                        ctx.beginPath();
                        ctx.rect(-20, -20, 40, 40);
                        ctx.translate(120, 60);
                        ctx.stroke();

                        ctx.strokeStyle = "green";
                        ctx.rotate(Math.PI / 4);
                        ctx.stroke;
                    }
                }
            }

            TextRectangle {
                text.text: qsTr("Composite Mode");

                Canvas {
                    anchors.left: parent.left;
                    anchors.top: parent.top;
                    anchors.right: parent.right;
                    anchors.bottom: parent.text.top;
                    onPaint: {
                        var ctx = getContext("2d");

                        ctx.globalCompostieOperate = "xor";
                        ctx.fillStyle = "#33a9ff";

                        for (var i = 0; i < 40; i++)
                        {
                            ctx.beginPath();
                            ctx.arc(Math.random()*200, Math.random()*200, 20, 0, 2*Math.PI);
                            ctx.closePath();
                            ctx.fill();
                        }
                    }
                }
            }

        }
    }

}
